import React from 'react';
import { Button, ButtonProps, Col, Row, Select, SelectProps } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import './index.less';

const PREFIX = 'inbiz-SelectExtend';

const { Option } = Select;

export interface ISelectExtend {
  className?: string;
  selectProps?: SelectProps;
  addonBefore: ButtonProps;
  options: {
    [x: string]: any;
    label: string;
    value: any;
  }[];
}

const SelectExtend: React.FC<ISelectExtend> = (props) => {
  const {
    className: wrapClassName,
    selectProps,
    addonBefore,
    options,
    ...rest
  } = props;
  const {
    className,
    filterOption = false,
    ...restSelectProps
  } = selectProps || {};
  const optionsView = options.map((d, i) => (
    <Option key={d.key || i} value={d.value}>
      {d.label}
    </Option>
  ));
  return (
    <Row className={`${PREFIX} ${wrapClassName}`} {...rest}>
      <Button
        className={`${PREFIX}-addonBefore ${addonBefore?.className}`}
        {...addonBefore}
      ></Button>
      <Col flex={1}>
        <Select
          className={`${PREFIX}-select ${className}`}
          filterOption={filterOption}
          {...restSelectProps}
        >
          {optionsView}
        </Select>
      </Col>
    </Row>
  );
};

export default SelectExtend;
